﻿@model FH.Application.PorductApp.Dtos.ProductDto
@using FH.Application.PorductApp.Dtos
@{
    ViewData["Title"] = "产品详情";
    Layout = "~/Views/Shared/_Layout.cshtml";
    List<CategoryDto> categoryDtos = ViewBag.Categorys as List<CategoryDto>;
}
<style type="text/css">

    .service-v1 {
        padding-bottom: 20px;
        background-image: url('/images/B-01.jpg');
        background-color: rgb(9, 14, 20);
        height: 316px;
        background-position: center center;
        background-repeat: no-repeat;
    }

    p.phbox img.phfront {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
    }

    p.phbox img.phback {
        height: 0px;
        z-index: 1;
        position: absolute;
        left: 0;
        top: 34px;
    }

    .button_btndefault-link {
        text-align: center;
        display: block;
        margin-top: 20px;
        font-family: Microsoft YaHei;
        font-size: 14px;
        font-weight: normal;
        color: #fff;
    }

    A.button_btndefault-link:visited {
        text-decoration: none;
        color: #fff;
    }

    A.button_btndefault-link:link {
        text-decoration: none;
        color: #fff;
    }

    .itembox {
        margin-top: 10px;
    }

        .itembox.border {
            border-right: 1px solid #fff;
        }

    .navigation, .navigation ul, .navigation li {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        border: thin none;
    }

    .navigation {
        position: relative;
        height: 54px;
        line-height: 54px;
        background: url(http://static.websiteonline.cn/website/plugin/new_navigation/styles/hs7/nav_bg.jpg) repeat-x;
        margin-bottom: 10px;
        padding-left: 10px;
    }

        .navigation li.wp_subtop {
            padding-left: 5px;
            padding-right: 5px;
            text-align: center;
            position: relative;
            float: left;
            padding-bottom: 0px;
            width: 115px;
            height: 54px;
            line-height: 54px;
            background-image: url(http://static.websiteonline.cn/website/plugin/new_navigation/view/images/png_bg.png);
            background-repeat: no-repeat;
            background-position: top right;
            background-color: transparent;
        }

            .navigation li.wp_subtop:hover {
                width: 115px;
                height: 54px;
                line-height: 54px;
                background-image: url(http://static.websiteonline.cn/website/plugin/new_navigation/styles/hs7/li_hover.png);
                background-color: transparent;
                background-position: bottom left;
                background-repeat: repeat-x;
            }

            .navigation li.wp_subtop > a {
                white-space: nowrap;
                display: block;
                padding: 0px;
                text-decoration: none;
                font-size: 12px;
                font-family: arial;
                color: #ffffff;
                text-align: center;
                font-weight: normal;
                font-style: normal;
                overflow: hidden;
            }

                .navigation li.wp_subtop > a:hover {
                    font-size: 12px;
                    font-family: arial;
                    color: #fff;
                    text-align: center;
                    font-weight: normal;
                    font-style: normal;
                }

        .navigation ul {
            position: absolute;
            left: 0px;
            display: none;
            padding-left: 5px;
            padding-right: 5px;
            background-image: url(http://static.websiteonline.cn/website/plugin/new_navigation/view/images/png_bg.png);
            background-color: transparent;
            margin-left: 0px;
            padding-top: 10px;
            padding-bottom: 8px;
        }

            .navigation ul li {
                position: relative;
                text-align: center;
                padding-bottom: 0px;
                padding-left: 5px;
                padding-right: 5px;
                height: 31px;
                line-height: 31px;
                background-image: url(http://static.websiteonline.cn/website/plugin/new_navigation/view/images/png_bg.png);
                background-repeat: repeat;
                background-position: top left;
                background-color: #516c47;
            }

                .navigation ul li:hover {
                    height: 31px;
                    text-align: center;
                    line-height: 31px;
                    padding-left: 5px;
                    padding-right: 5px;
                    background-image: url(http://static.websiteonline.cn/website/plugin/new_navigation/view/images/png_bg.png);
                    background-repeat: repeat;
                    background-position: top left;
                    background-color: #3a4c34;
                }

                .navigation ul li a {
                    display: block;
                    font-size: 12px;
                    font-family: arial;
                    color: #fff;
                    text-align: center;
                    font-weight: normal;
                    font-style: normal;
                    white-space: nowrap;
                }

                    .navigation ul li a:hover {
                        display: block;
                        font-size: 12px;
                        font-family: arial;
                        color: #ffffff;
                        text-align: center;
                        font-weight: normal;
                        font-style: normal;
                    }

    .navigation {
        background-color: transparent;
    }

    .navigation {
        background-image: url(http://static.websiteonline.cn/website/plugin/product_category/view/images/png_bg.png);
    }

    .navigation {
        height: 50px;
    }

    .navigation {
        background-position: center center;
    }

        .navigation li.wp_subtop {
            line-height: 46px;
        }

        .navigation li.wp_subtop {
            height: 46px;
        }

            .navigation li.wp_subtop > a {
                font-family: Microsoft YaHei;
            }

            .navigation li.wp_subtop > a {
                font-size: 14px;
            }

            .navigation li.wp_subtop > a {
                color: #434343;
            }

        .navigation li.wp_subtop {
            background-position: center center;
        }

            .navigation li.wp_subtop:hover {
                line-height: 46px;
            }

            .navigation li.wp_subtop:hover {
                height: 46px;
            }

            .navigation li.wp_subtop > a:hover {
                font-size: 14px;
            }

            .navigation li.wp_subtop > a:hover {
                font-family: Microsoft YaHei;
            }

        .navigation li.wp_subtop {
            background-image: url("http://security-1010808.hkpic1.websiteonline.cn/upload/class_bg.png");
        }

        .navigation li.wp_subtop {
            width: 150px;
        }

            .navigation li.wp_subtop:hover {
                width: 150px;
            }

            .navigation li.wp_subtop:hover {
                background-color: transparent;
            }

            .navigation li.wp_subtop:hover {
                background-image: url("http://security-1010808.hkpic1.websiteonline.cn/upload/class_bg_hover.png");
            }

            .navigation li.wp_subtop:hover {
                background-position: center center;
            }

            .navigation li.wp_subtop:hover {
                background-repeat: no-repeat;
            }

    .aeffect {
        width: 100%;
        display: block;
        max-height: 350px;
    }

    .product-list .item {
        padding: 20px;
    }

    .aeffect > img {
        width: 100%;
        max-height: 350px;
    }

    .product-list .title {
        display: block;
        text-align: center;
        font-family: Microsoft YaHei;
        font-size: 14px;
        font-weight: bold;
        line-height: 140%;
        color: #333;
        padding: 8px;
    }

    .wp-title_content {
        word-wrap: break-word;
        padding: 0px;
        margin: 0 auto;
        display: block;
    }

    .wp-new-prodcuts-detail-right h2 {
        font-size: 20px;
        font-weight: normal;
        line-height: 33px;
        margin-bottom: 10px;
    }

    .wp-new-prodcuts-detail-right .twjianju > h2 {
        font-weight: bold;
        font-family: 'Microsoft YaHei';
    }
    /*
        ================================
        Bx Slider
        ================================
        */

    .main-slider {
        width: 1170px;
        height: 720px;
        position: relative;
        z-index: 99;
        margin: 0 auto;
        margin: 20px auto 50px;
    }

    .slider ul li {
        width: 100%;
        height: 300px;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
        background-position: top center;
    }

        .slider ul li .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #353535;
            opacity: 0.5;
            filter: alpha(opacity=50);
            z-index: 99;
        }

        .slider ul li .content {
            max-width: 1170px;
            position: relative;
            margin: 0 auto;
            text-align: center;
            padding-top: 40px;
        }

        .slider ul li .inner {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 999;
        }


    .slider p {
        font-family: 'Montserrat', sans-serif;
        color: #fff;
        font-size: 20px;
    }

        .slider p.button {
            overflow: hidden;
            margin-top: 10px;
        }

            .slider p.button a {
                font-size: 16px;
                -webkit-transition: all 0.4s ease 0s;
                -moz-transition: all 0.4s ease 0s;
                -o-transition: all 0.4s ease 0s;
                transition: all 0.4s ease 0s;
                color: #ffffff;
                background: #f57c05;
                padding: 10px 20px;
                border-radius: 8px;
                -webkit-border-radius: 8px;
                -moz-border-radius: 8px;
                text-transform: uppercase;
            }

                .slider p.button a:hover {
                    opacity: 0.9;
                    filter: alpha(opacity=90);
                }

    .bx-wrapper .bx-viewport {
        left: 0;
        border: 0 !important;
        box-shadow: none !important;
    }
</style>
@section scripts{
    <script src="~/js/jquery.bxslider.min.js"></script>
    <script type="text/javascript">
        $('.bxslider').bxSlider({
            auto: true,
            pager: false,
            speed: 500,
            pause: 6000,
            easing: 'ease-in-out'
        });
    </script>
}
<section class="service-v1 hidden-sm hidden-xs">
    <div class="container ">
        <div class="row">
            <div class="col-md-3">

            </div>
            <div class="col-md-6">
                <div class="wp-title_content" style="border-color: transparent; border-width: 0px; height: 51px;margin-top: 120px;float:left;">
                    <div style="text-align:left;">
                        <span style="color: #cd3c32; font-family: 微软雅黑; font-size: 29px;    float: left;">
                            <strong>产品中心</strong>
                        </span>
                    </div>
                </div>

                <div class="wp-title_content" style="margin-top: 115px;border-color: transparent; border-width: 0px;float:left;    margin-left: 20px;">
                    <div style="text-align: left;"><span style="color: #333;font-weight: bold; font-family: 微软雅黑; line-height: 180%; font-size: 14px;">致力于新型建筑材料的研发与制造</span></div>
                    <div style="text-align: left;"><span style="color: #333;font-weight: bold; font-family: 微软雅黑; line-height: 180%; font-size: 14px;">为客户提供系统的解决方案及全面的技术支持</span></div>
                </div>
            </div>
        </div>

    </div>
</section>
<section class="products">
    <div class="container">

        <div class="row">
            <div class="col-md-12">
                <div class="wp-title_content" style="border-color: transparent; border-width: 0px; height: 51px;margin-top: 80px;">
                    <div style="text-align: center;">
                        <span style="color: rgb(67, 67, 67); font-family: 微软雅黑; font-size: 29px;">
                            <strong>产品中心</strong>
                        </span>
                    </div>
                </div>
                <div class="wp-title_content" style="margin-top: 20px; border-color: rgb(218, 36, 24) transparent transparent; border-width: 4px 0px 0px; height: 7px; width: 50px;  border-style: solid;">&nbsp; &nbsp; &nbsp;</div>
            </div>
        </div>
        <div class="row" style="margin-top: 50px;border-bottom: 1px solid #e2e2e2;">
            <ul class="navigation">
                @if (categoryDtos != null && categoryDtos.Any())
                {
                    for (int i = 0; i < categoryDtos.Count(); i++)
                    {
                        <li style="z-index:2;" class="wp_subtop @(i==0?"active":"")" pid="1" data-id="@categoryDtos[i].Id"><a class="">@categoryDtos[0].Name</a></li>
                    }
                }
            </ul>
        </div>
        <div class="row product-list" style="margin:10px 0;padding-bottom: 20px;
    border-bottom: 1px solid #e2e2e2;">
            <div class="wp-new-prodcuts-detail-right col-lg-8">
                <div class="twjianju">
                    <h2>@Model.Name</h2>

                </div>
                <div class="detail">
                    <p>
                        <span style="font-family:微软雅黑;font-size:14px;line-height:24px;"><strong>系统简介</strong></span><br>
                        <div class="funtions">
                            @{
                                if (!string.IsNullOrEmpty(Model.Content))
                                {

                                    string[] content = Model.Content.Replace("；", ";").Trim(';').Split(';');
                                    if (content != null && content.Any())
                                    {
                                        foreach (string item in content)
                                        {
                                            <span style="font-family:微软雅黑;font-size:14px;line-height:24px;">@(string.Format("{0};", item))</span><br>

                                        }
                                    }

                                }
                            }
                            @*<span style="font-family:微软雅黑;font-size:14px;line-height:24px;">采用高性能DSP实现H.264视频编码压缩；</span><br>
                                <span style="font-family:微软雅黑;font-size:14px;line-height:24px;">支持事件压缩功能；</span><br>
                                <span style="font-family:微软雅黑;font-size:14px;line-height:24px;">本地信号量报警，支持E.mail联动发送报警信息及截图，支持PTZ联动；</span><br>
                                <span style="font-family:微软雅黑;font-size:14px;line-height:24px;">支持DDNS、NTP功能；</span><br>
                                <span style="font-family:微软雅黑;font-size:14px;line-height:24px;">支持多种解码器协议；</span><br>
                                <span style="font-family:微软雅黑;font-size:14px;line-height:24px;">支持通过网络设置参数、预览图像及云台控制；</span><br>
                                <span style="font-family:微软雅黑;font-size:14px;line-height:24px;">支持键盘控制；</span><br>
                                <span style="font-family:微软雅黑;font-size:14px;line-height:24px;">支持USB设备、SATA刻录机对录像手动备份，支持SATA硬盘自动备份；</span><br>
                                <span style="font-family:微软雅黑;font-size:14px;line-height:24px;">支持USB鼠标；</span><br>
                                <span style="font-family:微软雅黑;font-size:14px;line-height:24px;">支持水印（WATER-MARK）技术。</span><br>*@
                        </div>
                        <br>
                        <span style="font-family:微软雅黑;font-size:14px;line-height:24px;"><strong>适应场所</strong></span><br>
                        <div class="place">
                            <span style="font-family:微软雅黑;font-size:14px;line-height:24px;">@Model.Usage</span>
                        </div>
                        <br>
                        <span style="font-family:微软雅黑;font-size:14px;line-height:24px;"><strong>施工厚度</strong></span><br>
                        <div class="place">
                            <span style="font-family:微软雅黑;font-size:14px;line-height:24px;">@Model.Thickness</span>
                        </div>
                    </p>
                </div>
            </div>
            <div class="wp-new-prodcuts-detail-left wp-magnifier_box col-lg-4">
                <div class="wp-new-prodcuts-detail-picture-big wp-magnifier_small">
                    <span class="wp-magnifier_mark"></span>
                    <img style="width: 300px; height: auto; margin: 0px;" src="@Model.Analyse" class="wp-product_detail-imgpreview">
                </div>
            </div>
        </div>
        <div class="row">
            <!-- Slider Start -->
            <section class="main-slider">
                <div class="slider">
                    <ul class="bxslider">
                        @{
                            if (!string.IsNullOrEmpty(Model.Imgs))
                            {
                                string[] imgs = Model.Imgs.Trim(',').Split(',');
                                foreach (string item in imgs)
                                {

                                    <li style="background-image:url(@item);">

                                    </li>
                                }
                            }
                        }
                        @*<li style="background-image:url(/images/slides/1.jpg);">

                            </li>
                            <li style="background-image:url(/images/slides/2.jpg);">

                            </li>*@
                    </ul>
                </div>
            </section>
            <!-- Slider End -->
        </div>
    </div>
</section>